<html>
<head>
    <meta charset="UTF-8">
    <title>网上商城会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="../../static/css/style.css">
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="../../static/js/jquery-1.11.3.min.js"></script>
    <script src="../../static/js/bootstrap.js"></script>
    <script type="text/javascript">
        /**
         * 1、获取指定id的值
         * @param objId
         * @returns {*}
         */
        function val(objId) {
            return document.getElementById(objId).value;
        }
        //2.1显示错误信息
        function showTip(errObjId,text) {
            var showObj =document.getElementById(errObjId);
            showObj.innerHTML=text;
            showObj.style.display="block";

        }
        //隐藏错误提示
        function hideTip(errObjId) {
            var showObj = document.getElementById(errObjId);
            showObj.innerHTML="";
            showObj.style.display="none";

        }
        //获得焦点
        function focus(objId){
            //指定标签获得焦点
            document.getElementById(objId).focus();
        }

        function checkName() {
            var focusObjId;//记录需要获得焦点标签的id值
            // 1、验证用户名：必须由字母，数字下划线组成，并且长度为5到12 位
            // var  loginName =document.getElementById("username").value;
            var loginName = val("username");
            if (!/^[A-Za-z0-9_]{5,12}$/.test(loginName)) {
                //用户名输入不正确
                // alert("用户名输入不正确");
                showTip("usernameTip", "请输入正确的用户名");
                document.getElementById("username").focus();
                // focusObjId = "username";
                // return false;
            } else {
                hideTip("usernameTip");
            }
        }
        function checkpwd(){
            // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
            // var loinPassword = document.getElementById("password").value;
            var loginpwd = val("password");
            if (!/^[A-Za-z0-9_]{5,12}$/.test(loginpwd)){
                showTip("passwordTip","请输入正确的密码");
                // document.getElementById("password").focus();
                focusObjId = "password";
                // return false;
            }else{
                hideTip("passwordTip")
            }
        }
        function loginsuccess() {

            var loginstn =val("sub_btn");
            if (!loginstn){
                showTip("sub_btnTip","输入不正确");
            }else{
                hideTip("sub_btnTip")
            }

        }
    </script>
</head>
<body>
<div id="login_header">
    <img class="logo_img" alt="" src="static/img/logo.gif">
</div>

<div class="login_banner">

    <div id="l_content">
        <span class="login_word">欢迎登录</span>
    </div>

    <div id="content">
        <div class="login_form">
            <div class="login_box">
                <div class="tit">
                    <h1>网上商城会员</h1>
                    <a href="pages/user/regist.html">立即注册</a>
                </div>
                <div class="msg_cont">
                    <b></b>
                    <span class="errorMsg">请输入用户名和密码</span>
                </div>
                <div class="form">
                    <!--<form action="login_success.html">-->
                    <form action="/shop/login">
                        <label>用户名称：</label>
                        <input onblur="checkName()" class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1"
                               name="username" id="username"/>
                        <span><font id="usernameTip" color="red"></font> </span>
                        <br/>
                        <br/>
                        <label>用户密码：</label>
                        <input  onblur="checkpwd()" class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1"
                                name="password" id="password"/>
                        <span><font id="passwordTip" color="red"></font> </span>
                        <br/>
                        <br/>
                        <input   onblur="loginsuccess()" type="submit" value="登录" id="sub_btn"/>
                        <span><font id="sub_btnTip" color="red"></font> </span>
                    </form>
                </div>

            </div>
        </div>
    </div>
</div>
<div id="bottom">
			<span>
				网上商城.Copyright &copy;2020
			</span>
</div>
</body>
</html>
